【krpano】ホットスポットをクリックして画像を表示する方法

パノラマの中にホットスポットを表示させて、そのホットスポットをクリックすると画像を表示させる方法。

基本は
【krpano】画像Aをクリックして画像Bの透明度を変化させる

ただしこれだと表示させていない間でも隠れている画像の上にカーソルがあると画像をプラグインとして認識してしまうので、修正版です。

【使用するファイル】
xmlファイル
画像A
画像B

【基本コード】画像A
以下のコードをxmlファイルに記述する

	<plugin name="gazo1"
	url="../board.png"
	align="center"
	visible="false"
	alpha="0"
	onclick="tween(alpha,0,0.5,default, set(visible,false));"/>

【基本コード】画像B

<hotspot name="gazo2"
	url="../bottom.png"
	scale="1"
	edge="center"
	visible="true"
	enabled="true"
	handcursor="true"
	alpha="1"
	onclick="set(plugin[gazo1].visible,true); 	tween(plugin[gazo1].alpha,1,0.5,default);"
	devices="all"/>

【memo】
visible=”false”をfalseにしないと画像が隠れた状態でも画像がパノラマ上に有ると判断されてしまう。

【実例】

<krpano version="1.16">

<include url="skin/defaultskin.xml" />

<view hlookat="0" vlookat="0" maxpixelzoom="1.0" fovmax="150" limitview="auto" />

<preview url="mukogawa1.tiles/preview.jpg" />

<image type="CUBE" multires="true" tilesize="512" progressive="false">
<level tiledimagewidth="4776" tiledimageheight="4776">
<cube url="mukogawa1.tiles/mres_%s/l4/%0v/l4_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="2388" tiledimageheight="2388">
<cube url="mukogawa1.tiles/mres_%s/l3/%0v/l3_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="1194" tiledimageheight="1194">
<cube url="mukogawa1.tiles/mres_%s/l2/%0v/l2_%s_%0v_%0h.jpg" />
</level>
<level tiledimagewidth="597" tiledimageheight="597">
<cube url="mukogawa1.tiles/mres_%s/l1/%0v/l1_%s_%0v_%0h.jpg" />
</level>
<mobile>
<cube url="mukogawa1.tiles/mobile_%s.jpg" />
</mobile>
</image>

<plugin name="gazo1"
url="sampleimage.jpg"
align="center"
visible="false"
alpha="0"
onclick="tween(alpha,0,0.5,default, set(visible,false));"/>

<hotspot name="gazo2"
url="sampleimage.png"
scale="0.5"
edge="center"
visible="true"
enabled="true"
handcursor="true"
alpha="1"
onclick="set(plugin[gazo1].visible,true); tween(plugin[gazo1].alpha,1,0.5,default);"
devices="all"/>

</krpano